import React, {FC, useCallback, useEffect, useMemo, useRef} from "react";
import {addOkModal, closeModal} from "../../../services/ModalService.tsx";
import GlobalCodeEdit from "../../../global/GlobalCodeEdit.tsx";

const defaultConfigValue: string = `{
    isShow: (props) => {
        return true;
    }
}`

interface MenuConfigProps {
    modalKey: string,
    value: string
}

const MenuConfig: FC<MenuConfigProps> = (props) => {
    const codeEditRef = useRef();

    const onOk: Function = useCallback(() => {
        closeModal(props.modalKey, () => {
            return codeEditRef.current.getValue()
        })
    }, []);

    useEffect(() => {
        addOkModal(props.modalKey, onOk);
    }, []);

    const renderMenuConfig = useMemo(() => {
        return (
            <div>
                <GlobalCodeEdit
                    init={codeEditRef}
                    value={props.value || defaultConfigValue}
                />
            </div>
        )
    }, [props.value]);

    return (renderMenuConfig);
}

export default React.memo(MenuConfig);